<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom linkId="usr18bmu6h64itbb" :linkData="linkData"></HeadCustom>
		<view class="wrap">
			<u-swiper class="swiper-inner" height="654rpx" radius="0" :list="detail.productUrlList">
				<view slot="indicator" class="indicator fboxRow">
					<view class="indicator__dot" v-for="(item, index) in detail.productUrlList" :key="index"
						:class="[index === current && 'indicator__dot--active']">
					</view>
				</view>
			</u-swiper>
			<view class="info">
				<view class="title font28">{{detail.productName}}</view>
				<view class="price mt24 font28">￥{{detail.productPrice}}</view>
			</view>
			<view class="space bg-21242C"></view>
			<view class="box">
				<view class="hd fboxRow Ycenter Xcenter"><view class="tit bg-1A1D25 font28 color-E8CDA7 lh44">详细介绍</view></view>
				<view class="bd">
					<view class="content color-ACB4C7 font30 lh44" v-html="detail.productDetail" style="white-space: pre-wrap;"></view>
				</view>
			</view>
		</view>
		<view class="fixed-space"></view>
		<view class="fixed-action fboxRow Ycenter bg-1A1D25">
			<view class="collect fboxCol Ycenter Xcenter" @click="collect">
				<text class="bwfont  font40" :class="detail.isCollected ? 'color-E8CDA7 bw-a-ziyuan1' : 'color-6B707C bw-a-ziyuan11'"></text>
				<view class="font22 color-ACB4C7" :class="[detail.isCollected ? 'color-E8CDA7': 'color-ACB4C7']">{{detail.isCollected ? '已收藏': '收藏'}}</view>
			</view>
			<view class="flex1"><view class="btn fboxRow Ycenter Xcenter color-fff" @click="$pageTo('/about/guidePage')">立即咨询</view></view>
		</view>
		<not-login ref="notLogin" />
	</view>
</template>

<script>
	import {
		companyProductDetail
	} from '@/api/card.js';
	import {collectionCard, collectioncCancel } from '@/api/h5.js';
	export default {
		data() {
			return {
				theme: getApp().globalData.appTheme,
						globalColor: getApp().globalData.globalColor,
				detail: {},
				current: 0,
				id: '',
				linkData: {id:''}
			}
		},
		onLoad(options) {
			if (options && options.productId) {
				this.id = options.productId
				this.linkData= {id:options.productId}
			}
		},
		onShow() {
			this.getInit()
		},
		methods: {
			getInit() {
				companyProductDetail({
					productId: this.id
				}).then(res => {
					this.detail = res.data
					uni.setNavigationBarTitle({
						title: `${res.data.productName}-产品详情`
					})
				})
			},
			// 收藏产品
			collect(){
				const bw_params = getApp().getBWData(['bw_params']).bw_params
				if (bw_params && bw_params.access_token) {
					if (this.detail.isCollected) {
						collectioncCancel({
							"collectionId": this.detail.productId
						}).then(res => {
							if (res.data) {
								this.detail.isCollected = false;
								uni.showToast({
									icon: 'none',
									title: '取消收藏'
								});
							}
						});
					} else {
						collectionCard({
							"akey": "",
							"businessId": this.detail.productId,
							"collectionType": 3,
						}).then(res => {
							if (res.data) {
								this.detail.isCollected = true;
								uni.showToast({
									icon: 'none',
									title: '收藏成功'
								});
							}
						});
					}
				} else {
					this.$refs.notLogin.openLogin({
						show: true,
						position: 'center'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-inner {
		height: 654rpx;
	}

    .indicator {
        justify-content: center;

        &__dot {
             // height: 6px;
             // width: 6px;
             // border-radius: 100px;
             // background-color: rgba(255, 255, 255, 0.35);
             transition: background-color 0.3s;
			width: 48rpx;
			height: 6rpx;
			background: var(--viewBgColor);
			// border-radius: 0rpx 0rpx 0rpx 0rpx;
			// opacity: 1;
            &--active {
                 background-color: #E8CDA7;
             }
        }
    }
	.info {
		padding: 20rpx 40rpx;
	}

	.title {
		line-height: 40rpx;
	}

	.price {
		color: #D25941
	}
	.space{width: 750rpx;height: 16rpx;}
	.hd{height: 104rpx;position: relative;}
	.hd .tit{padding: 0 14rpx;background-color: var(--controllerBgColor);position: relative;z-index: 2;}
	.hd::before{content: ''; position: absolute;left: 50%; top:0; margin:52rpx 0 0 -180rpx; width: 360rpx;height:1rpx;background-color: #E8CDA7;}
	.content{padding: 24rpx 32rpx;}
	.content /deep/ img{margin-top: 24rpx; max-width: 100%; border-radius: 12rpx;overflow: hidden;}
	.fixed-space{height: 160rpx;}
	.fixed-action{position: fixed;left: 0;;right: 0; bottom: 0;padding: 14rpx 40rpx 58rpx;}
	.fixed-action .btn{height: 76rpx;background-color: var(--viewBgColor); border-radius: 40rpx;}
	.fixed-action .collect{ margin-right: 32rpx; width: 80rpx;}
	
</style>